<!--
 * @Author: 1453937336@qq.com 1453937336@qq.com
 * @Date: 2024-05-17 11:00:25
 * @LastEditors: 1453937336@qq.com 1453937336@qq.com
 * @LastEditTime: 2024-07-17 10:23:09
 * @FilePath: \itforce-hris\src\components\Table\table-form-item.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <a-form-item class="formItem" v-for="(searchItem, index) in opts" :key="index" :prop="searchItem.prop"
        :label-width="searchItem.labelWidth" :rules="searchItem.rules" :required="searchItem.required"
        :content-flex="true">
        <a-input class="inputType" v-if="searchItem.type === 'input'" size="default"
            v-model:value="searchForm[searchItem.prop]" v-bind="searchItem.attrs" v-on="searchItem.on" :placeholder="searchItem.attrs.placeholder
                ? searchItem.attrs.placeholder
                : $t('请输入')
                " />
        <a-select :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" v-if="searchItem.type === 'select'" size="default" v-model="searchForm[searchItem.prop]"
            :rules="searchItem.rules" v-bind="searchItem.attrs" :placeholder="searchItem.attrs.placeholder
                ? searchItem.attrs.placeholder
                : $t('请选择')
                " v-on="searchItem.on">
            <a-option v-for="(optItem, i) in searchItem.opts" :key="i" :label="optItem.label" :value="optItem.value" />
        </a-select>
        <a-date-picker :getPopupContainer="(triggerNode:any) => triggerNode.parentNode" style="width: 100%;" v-if="searchItem.type === 'date'" v-model="searchForm[searchItem.prop]"
            type="date" size="default" v-bind="searchItem.attrs" v-on="searchItem.on" />
        <a-date-picker :getPopupContainer="(triggerNode:any) => triggerNode.parentNode" style="width: 100%;" v-if="searchItem.type === 'range-date'"
            v-model="searchForm[searchItem.prop]" type="daterange" size="small" range-separator="-"
            :start-placeholder="searchItem.attrs.startPlaceholder" :end-placeholder="searchItem.attrs.endPlaceholder"
            v-bind="searchItem.attrs" v-on="searchItem.on" />
        <!-- `<a-input-search v-if="searchItem.type === 'inputSearch'" style="margin-right: 8px;width: 100%;"
            :placeholder="`${$t('search')}...`" v-model:value="searchForm[searchItem.prop]" @search="handleQuery">
            <template #enterButton>
                <i class="fa fa-search-plus" />
            </template>
        </a-input-search>` -->

        <a-input-group v-if="searchItem.type === 'inputSearch'" compact style="margin-right: 8px;">
            <a-input style="width: 200px;" v-model:value="searchForm[searchItem.prop]"
                :placeholder="`${$t('search')}...`" allowClear @pressEnter="handleQuery"/>
            <a-button type="" class="search" @click="handleQuery">
                <i class="fa fa-search-plus" />
                <span style="margin-left: 4px;margin-right: 4px;">{{ $t('search')}}</span>
            </a-button>
        </a-input-group>
    </a-form-item>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { defineEmits } from 'vue'
const emits = defineEmits(['query']);
const { t: $t } = useI18n();
const props = defineProps({
    opts: {
        required: true,
        type: Array,
        default: [],
    },
    searchForm: {
        required: true,
        type: Object,
        default: {},
    },
});
const handleQuery = () => {
    emits('query')
}
</script>
<style lang="scss" scoped>
.formItem {
    margin-inline-end: 0;
    .inputType {
        border: 1px solid #dadada !important;
        border-radius: 4px 0 0 4px !important;
        border-right: none !important;
    }
    .search {
        height: 32.86px;
        background-color: #fff;
        color: #676a6c;
        border: 1px solid #d9d9d9;
        border-radius: 0 3px 3px 0;
    }
}
::v-deep {
    // 全局样式修改回来
    .ant-input-affix-wrapper {
        border: 1px solid #dadada !important;
        // height: 100%;
    }
    .ant-input:hover,
    .ant-input {
        border-bottom: none !important;
    }
    .ant-input-affix-wrapper >input.ant-input {
        padding: 6px 11px;
    }
    .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
      border-color: var(--btn-bg-save) !important;
    }
    .ant-input-affix-wrapper-focused,
    .ant-input-affix-wrapper:hover,
    .ant-input-affix-wrapper:focus {
      border-color: var(--btn-bg-save) !important;
    }
    .ant-input-affix-wrapper:focus {
        border: 1px solid #d9d9d9 !important;
    }
    .ant-input-affix-wrapper:hover {
        border: 1px solid #d9d9d9 !important;
    }
    .ant-input-affix-wrapper .ant-input-suffix {
        padding-right: 4px;
    }
    .ant-input-group.ant-input-group-compact>*:first-child {
        border-start-start-radius: 3px;
        border-end-start-radius: 3px;
    }
    .ant-input-group.ant-input-group-compact>*:last-child {
        border-start-end-radius: 3px;
        border-end-end-radius: 3px;
    }
        
}

</style>